<section>
  <div class="row">
    <div class="col-md-6">
      <div class="devui-input-group devui-dropdown-origin">
        <input
          class="devui-input devui-form-control"
          placeholder="y/MM/dd"
          autocomplete="off"
          dTimePicker
          [(ngModel)]="selectedTime1"
          (click)="timePicker1.toggle()"
          #timePicker1="timePicker"
          (selectedTimeChange)="timeChange($event)"
          (ngModelChange)="modelChange($event)"
          [customViewTemplate]="myCustomView"
        />
        <div *ngIf="selectedTime1" class="devui-input-group-addon close-icon-wrapper" (click)="timePicker1.clearAll()">
          <i class="icon icon-close"></i>
        </div>
        <div class="devui-input-group-addon" (click)="timePicker1.toggle()">
          <i class="icon icon-time"></i>
        </div>
      </div>
    </div>
  </div>
  <ng-template #myCustomView let-chooseTime="chooseTime" let-confirmTime="confirmTime" let-hide="hide" let-timePicker>
    <a class="devui-link" (click)="choose(timePicker1)">choose now</a>
    <br />
    <a class="devui-link" (click)="confirmTime({ time: '22', type: 'hh' })">choose 22:00</a>
  </ng-template>
</section>
